<template>
    <div class="box">
        <div class="left" :style='{"width":w}'>
            <ul>
                <li :style='{"width":w}' v-for="(item, index) in dataArr" :key="index">
                    <router-link :to='item.path'>{{item.name}}</router-link>
                </li>
            </ul>
        </div>
        <div class="right" :style='{"background":color1}'>
            <router-view></router-view>
        </div>
    </div>
</template>
           
<script>
export default {
    props:['dataArr','color1','w'],
    data(){
        return  {
            lisArr:[],
            // w:'120px'
            // color:'blue'
        }
    }
};
</script>
<style scoped lang='less'>
*{
    margin: 0;
    padding: 0;
}
.box {
  width: 100%;
  height: 300px;
  display: flex;
  .left {
    // width: 100px;
    background-color: pink;
    ul{
        list-style: none;
        li{
            
            height:35px;
            line-height:35px;
           text-align: center;
           border-bottom:1px  solid  #ccc;

        }
    }
  }

  .right {
    flex: 1;
    // background-color: blue;
  }
}
</style>